<template>
  <div
    class="v-shape-comp-config-tab g-pd-16"
    style="height: 100%"
  >
    <el-tabs
      :model-value="activeName"
      type="card"
      class="g-panel-tabs"
      style="border: 1px solid #e0e0e0"
      @tab-click="tabChange"
    >
      <el-tab-pane
        v-for="item in compTabList"
        :key="item.key"
        :name="item.key"
        lazy
      >
        <template #label>
          <m-tab-item
            :label="$t(item.name)"
            style="justify-content: center"
          />
        </template>
        <component
          :is="item.comp"
          v-if="!!item.comp"
          :shapeCustomizationManagementModel="model"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ShapeCustomizationManagementModel, tabList } from "@/modules/model/modals/shapeCustomization/ShapeCustomizationManagementModel";
import { computed, reactive, ref } from "vue";
import MTabItem from "@/modules/model/comps/common/TabItem.vue";
import { AttributeTabKey } from "@/constants/Enums";
import { TabsPaneContext } from "element-plus";
const props = defineProps<{
  shapeCustomizationManagementModel: ShapeCustomizationManagementModel;
}>();

const model: ShapeCustomizationManagementModel = reactive(props.shapeCustomizationManagementModel);

const compTabList = computed(() => {
  return tabList.find(v => v.key === AttributeTabKey.ShapeCompartmentConfiguration)?.subList || [];
});

const shapeCustomizationManagementModel: ShapeCustomizationManagementModel = reactive(props.shapeCustomizationManagementModel);
const activeName = ref(props.shapeCustomizationManagementModel.activeCompTab);

const tabChange = (tab: TabsPaneContext) => {
  shapeCustomizationManagementModel.changeActiveCompTab(tab.props.name as AttributeTabKey);
};
</script>

<style lang="scss">
.v-shape-comp-config-tab {
  .g-panel-tabs {
    .tab-title > span {
      max-width: 200px !important;
      white-space: nowrap;
      text-overflow: ellipsis;

      overflow-x: hidden;
    }
  }
}
</style>
